<template>
  <div class="container">
    <el-table highlight-current-row :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)">
      <el-table-column prop="NAME" label="车辆名称" align="center"></el-table-column>
      <el-table-column prop="Time" label="时间" align="center"></el-table-column>
      <el-table-column prop="POINTNAME" label="转运站名称" align="center"></el-table-column>
      <el-table-column label="车牌图片">
        <template slot-scope="scope">
          <el-image style="width: 40px; height: 40px" :src="scope.row.Image1" @click="big1(scope.row)"></el-image>
        </template>
      </el-table-column>
      <el-table-column label="环境图片">
        <template slot-scope="scope">
          <el-image style="width: 40px; height: 40px" :src="scope.row.Image2" @click="big2(scope.row)"></el-image>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="tableData.length"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
      ></el-pagination>
    </div>
    <el-dialog
      title="图片展示"
      :visible.sync="showBigDialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-image
        style="width: 100%; height: 100%"
        :src="srcBig"
      ></el-image>
    </el-dialog>
  </div>
</template>
<script>
import '@/assets/css/common.css'
import { formatDate } from '@/common/js/date.js'
import export2Excel from '@/utils/exportExcel/index.js'
export default {
  data () {
    return {
      showBigDialogVisible: false,
      srcBig: '',
      currentPage: 1, //初始页
      pageSize: 10,    //    每页的数据
      form: {
        radioData: '日',
        valueDay: formatDate(new Date(new Date() - 3600 * 1000 * 24), 'yyyy-MM-dd'),
        valueMonth: ''
      },
      tableData: [],
      originalData: [],
      exportExcelData: [],
      // srcList: [
      //   'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
      //   'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
      // ]
    }
  },
  created () {
    this.getlistdata();
  },
  methods: {
    async getlistdata () {
      this.currentPage = 1;
      var date = ''
      if (this.form.radioData === '日') {
        date = this.form.valueDay
      }
      if (this.form.radioData === '月') {
        date = this.form.valueMonth
      }
      var url = 'RubbishVehicle/GetZZZDeviceImage?ClientNo=' + localStorage.getItem('CLIENT_NO') 
      // 由于转运站属于项目级，如果登陆账号不是项目级，很可能查询结果为空
      // 要修改此问题，localStorage.getItem('CLIENT_NO')只取前七位，组成项目级ClientNo，查询即可
      const { data } = await this.$Http.get(url)
      // this.exportExcelData = data
      for (var i = 0; i < data.length;) {
        var item = data[i][1]
        if (data[i].CAR_TYPE === '车辆类型' || data[i].CAR_TYPE === '') {
          data.splice(i, 1);
        } else {
          i++;  //只有在没有删除元素时才对索引 i++
        }
      }
      this.tableData = data
    },
    big1 (row) {
      console.log(row)
      this.srcBig = row.Image1
      this.showBigDialogVisible = true
    },
    big2 (row) {
      console.log(row)
      this.srcBig = row.Image2
      this.showBigDialogVisible = true
    },
    // 导出Excel
    // exportExcel () {
    //   let excelName = '车辆作业信息计表'
    //   const tHeader = ['车辆名称', '车辆类型', '道路名称', '道路类型', '已作业长度（米）', '最近收运垃圾车辆', '未作业长度（米）', '作业时间', '作业开始时间', '作业结束时间', '夜班开始时间', '夜班结束时间', '早班开始时间', '早班结束时间']
    //   const filterVal = ['LICENSE_PLATE', 'CAR_TYPE', 'RoadName', 'RGrade', 'LRoadDist', 'LWorkDist', 'LNWorkDist', 'WTime', 'SD', 'ED', 'SD1', 'ED1', 'SD2', 'ED2']
    //   export2Excel(tHeader, filterVal, this.exportExcelData, excelName)
    // },
    //详情
    handleEdit (index, row) {
      //   this.idx = index;
      //   this.form = row;
      //   this.editVisible = true;
    },
    // 分页导航
    handlePageChange (currentPage) {
      this.currentPage = currentPage;
      // console.log(this.currentPage)
      // this.$set(this.query, 'pageIndex', val);
      // this.getData();
    },
    handleSizeChange (size) {
      this.pageSize = size;
      console.log(this.pageSize)
    },
    handleClose () {
      this.showBigDialogVisible = false;
    }
  }
}
</script>
<style>
.content {
  overflow-y: scroll;
}
.el-col-6 {
  min-width: 400px;
  min-height: 50px;
}
.el-table th {
  height: 40px;
}
</style>